<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test jQuery and JavaScript</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh.js"></script>
    <script src="js/jquery.growl.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/jquery.growl.css" />
    <link rel="stylesheet" type="text/css" href="css/my.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.bootcss.com/">Bootstrap</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"> Home</span></a></li>
        <li><a href="#about"><span class="glyphicon glyphicon-leaf"> About</span></a></li>
        <li><a id="msg" class="pointer">显示提示信息</a></li>
        <li><a id="error" class="pointer">显示危险信息</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-star"> Test Bootstrap</span></a></li>
      </ul>
    </div>
  </div>
</div>
<script>
//JQuery
$().ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle();
  });
  $("#form").validate({debug:true});
  
  //JQuery growl
  $("#msg").click(function(){
    $.growl.notice({ title: "提示", message: "打得漂亮！" });
  });
  $("#error").click(function(){
    $.growl.error({ title: "危险", message: "快趴下！" });
  });
});
</script>
<div class="container">
<div class="row holder">
<div class="part col-xs-12 col-sm-6 col-md-4">
    <div id="flip" class="header">Silde panel(JQuery)</div>
    <div id="panel" class="myPanel left">
    <script>
    function $p(str,suffix){
        if (suffix === undefined) {
            suffix = '<br/>';
        }
        document.write(str);
        document.write(suffix);
        console.log(str);
    }
    var arr = [1,4,9,36];
    $p("array.map:");
    arr.map(function(){
        $p(Math.random().toFixed(6).slice(2),',');
    });
    $p(arr.map(Math.sqrt));
    $p("array.reduce:");
    $p(arr.reduce(function(a, b){return a + b;}));
    </script>
    </div>
</div>

<div class="part col-xs-12 col-sm-6 col-md-4">
    <div class="header">评论表单 jQuery.validate</div>
    <form id="form" role="form" class="myPanel" method="post">
        <fieldset>
            <p class="form-group">
                <label class="left_label" for="name">*姓名：</label>
                <input id="name" name="name" type="text" minlength="2" required="required"/>
            </p>
            <p class="form-group">
                <label class="left_label" for="email">*邮件地址：</label>
                <input id="email" name="email" type="email" required="required"/>
            </p>
            <p class="form-group">
                <label class="left_label" for="url">个人网址：</label>
                <input id="url" name="url" type="url"/>
            </p>
            <p class="form-group">
                <label class="left_label" for="comment">*评论：</label>
                <textarea id="comment" name="comment" required="required"></textarea>
            </p>
            <p><button class="btn btn-default" type="submit">提交</button></p>
        </fieldset>
    </form>
</div>

<div class="clearfix visible-xs"></div>

<!-- AngularJS -->
<div class="part col-xs-12 col-sm-6 col-md-4" id="angularJS" ng-app="testApp" ng-controller="personController">
    <div class="header">Test AngularJS</div>
    <div class="myPanel">
        <p>
            <label class="left_label">Name:</label>
            <input type="text" ng-model="person.name" placeholder="Enter a name"/>
        </p>
        <p>
            <label class="left_label">Age:</label>
            <input type="number" max="100" ng-model="person.age" placeholder="Enter an age">
        </p>
        <p>Hello {{person.name}}! You are {{person.age}}.</p>
        <p>
            <button ng-click="toggle()">{{btn_lable}}</button>
            <ul ng-show="is_show" class="left"><li ng-repeat="x in names">{{ x }}</li></ul>
        </p>
    </div>
</div>
<script src="js/angular.min.js"></script>
<script>
var testApp = angular.module('testApp', []);
testApp.controller('personController', function ($scope) {
    $scope.person = {name:"John",age: 23};
    $scope.names = ['Jani','Hege','Kai'];
    $scope.is_show = false;
    $scope.btn_lable = "show list";
    $scope.toggle = function() {
        $scope.btn_lable = $scope.is_show?"show list":"hide list";
        $scope.is_show = !$scope.is_show;
    };
});
</script>
</div>
</div>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>